<template>
<div class="regist">
     <div class="text">小区用户注册</div>
     <div class="input">
           <van-cell-group>
                  <van-field
                    v-model="username"
                    required
                    label="用户名"
                    placeholder="请输入用户名"
                  />
                  <van-field
                    v-model="zhanghao"
                    required
                    label="账号"
                    maxlength=10
                    type="number"
                    placeholder="请输入账号，账号由不超过10位数字组成"
                  />
                  <van-field
                    v-model="password"
                    required
                    label="密码"
                    type="password"
                    placeholder="请输入不少于6位密码,由字母或数字构成"
                  />
                  <van-field
                    v-model="cpassword"
                    required
                    label="重复密码"
                    type="password"
                    placeholder="请确认密码"
                  />
                  <van-field
                    v-model="phone"
                    required
                    label="手机号码"
                    type="tel"
                    placeholder="请输入手机号(11位数)"
                  />
           </van-cell-group>
     </div>
     <div class="btn">
         <van-button type="primary" block style="background-color:#7be597;margin-bottom:5px;" @click.prevent="regist">立即注册</van-button>
         <van-button type="primary" block style="background-color:#7be597;margin-bottom:5px;" @click.prevent="$router.back()">返回</van-button>
     </div>
</div>
</template>

<script>
 import {verifyPhone,verifyZhangHao,regist,getxhgui,getybgui,savePhone} from './../../service/api/index'
 import {mapActions} from 'vuex'
 import {Toast,Field} from 'vant'
	 export default{
	 	name:"Regist",
        
        data() {
            return {
              username: '', 
              zhanghao: '',
              password: '',
              cpassword: '',
              phone:''
            };
       },


        computed:{
             //验证手机号码是否正确
              phoneRight(){
                //test 方法检查字符串是否与给出的正则表达式模式相匹配，如果是则返回 true，否则就返回 false。
                 return /^[1][3,4,5,7,8][0-9]{9}$/.test(this.phone) 
            },
             zhanghaoRight(){
                return  /^[0-9]{6,}$/.test(this.zhanghao)
             },
             passwordRight(){
                return /^[0-9A-Za-z]{6,}$/.test(this.password)
             }

        },
      methods: {
           //注册
            async regist(){
                       // 输入数据校验
                     if (!this.username.trim()) {
                  //    Toast.fail('请输入用户名');
                  //    return;
                     }
                     if (!this.zhanghao.trim()) {
                  //     Toast.fail('请输入账号');
                  //    return;
                     }else if (!this.zhanghaoRight) { //账号名不少于6位
                  //    Toast.fail('账号名不少于6位');
                  //        return ; 
                     }
                      if (!this.password.trim()) {
                  //     Toast.fail('请输入密码');
                  //    return;
                      } else if (!this.passwordRight) { //密码由数字或字母构成，不少于6位
                           Toast.fail('密码不少于6位');
                            return 
                      } 
                       if (this.password.trim() !== this.cpassword.trim()) {
                  //     Toast.fail('两次输入密码不一致');
                  //    return;
                       }
                      if (!this.phone.trim()) {
                  //        Toast.fail('请输入手机号码');
                  //        return;
                      }else if (!this.phoneRight) { //手机号码不正确
                            Toast.fail('请输入正确的手机号码');
                            return ;                        
                     }
                      //服务器端校验手机号码和账号是否存在
                     let resultZhangHao = await verifyZhangHao((this.zhanghao).trim());
                        if (resultZhangHao.status == 500) {
                        Toast.fail("该账号已经被注册，请重新输入");
                      return ;
                      };
                     let resultPhone = await verifyPhone((this.phone).trim());
                     // console.log(resultPhone);
                      if (resultPhone.status == 500) {
                        Toast.fail("该手机号码已经被注册，请重新输入");
                        return ;
                      }
                      //注册
                    let result = await regist(this.username,this.zhanghao,this.password,this.phone);
                         // console.log("wjs");
                         if (result.status) {
                             //注册成功，生成鲜活和一般蔬菜两个密码柜编号和对应密码
                               let gui1 = await getxhgui(this.zhanghao);
                               console.log(gui1);
                               let gui2 = await getybgui(this.zhanghao);
                               console.log(gui2);
                           //注册成功，把手机号码存在验证码表，以便可以使用手机验证码登录
                             let gui3 = await savePhone(this.phone);
                            console.log(gui3);
                            if (gui1.status==='200' && gui2.status==='200'&& gui3.status==='200') {
                                 Toast.success({
                                      message:'注册成功',
                                      duration:3000
                                   });
                               this.$router.push('/login');                 
                            } 
                     }


             }   //---regist
      

      },    //---methods
    	 
}     //   ---- export default
</script>

<style scoped>
    .regist{
        width:100%;
        height:100%;
        padding:10px 0px;
        background-color: #3fe66a;
    }  
     .text{
         width:120px;
         height:25px;
         margin:10px auto;
         color:red;
        font-size:15px;
     }
    .input{
        width:100opx;
        height:100px;
        margin-top:10px;
    }

    .van-cell
    {
        color:#465ca7;
        background-color: #3fe66a;
    }

    .btn{
        margin-top:150px;
    }
</style>